<template>
	<div class="article-lists">
		<el-card class="!border-none" shadow="never">
			<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
				<el-form-item label="服务类型">
                    <el-select
                        class="w-80"
                        v-model="queryParams.cate_id"
                        placeholder="请选择"
                        clearable
                    >
                        <el-option
                            v-for="item in optionsData.cateList.lists"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        />
                    </el-select>
				</el-form-item>
				<el-form-item label="姓名">
                    <el-input
                        class="w-[280px]"
                        v-model="queryParams.name"
                        clearable
                    />
				</el-form-item>

				<el-form-item label="手机号">
                    <el-input
                        class="w-[280px]"
                        v-model="queryParams.phone"
                        clearable
                    />
				</el-form-item>
				<el-form-item label="启用状态">
                    <el-select class="w-[280px]" v-model="queryParams.is_enable">
                        <el-option label="全部" :value="0"/>
                        <el-option label="启用" :value="1"/>
                        <el-option label="停用" :value="2"/>
                    </el-select>
				</el-form-item>
				<el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="!border-none" shadow="never">
			<div>
				<router-link
					v-perms="['server.server/saveUser', 'server.server/saveUser:edit']"
					:to="{path: getRoutePath('server.server/saveUser:edit')}"
				>
					<el-button type="primary" class="mb-4">
						<template #icon>
							<icon name="el-icon-Plus"/>
						</template>
						新增服务商
					</el-button>
				</router-link>
			</div>
			<el-table size="large" v-loading="pager.loading" :data="pager.lists">
				<el-table-column label="序号" type="index" :index="indexAdd" min-width="90" />
                <el-table-column label="姓名" prop="name" min-width="110" />
                <el-table-column label="头像" prop="header" min-width="90">
                    <template #default="{ row }">
                        <image-contain
                            v-if="row.header"
                            :src="row.header"
                            :width="60"
                            :height="45"
                            :preview-src-list="[row.header]"
                            preview-teleported
                            fit="contain"
                        />
                    </template>
                </el-table-column>
                <el-table-column label="职位" prop="position_name" min-width="130" />
                <el-table-column label="微信号" prop="wx_no" min-width="160" >
                    <template #default="{ row }">
                        <div class="ml-4 overflow-hidden">
                            <el-tooltip effect="dark" :content="row.wx_no" placement="top">
                                <div class="text-base line-clamp-2">
                                    {{ row.wx_no }}
                                </div>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="手机号" prop="phone" min-width="140" />
                <el-table-column label="公司" prop="company" min-width="200" >
                    <template #default="{ row }">
                        <div class="ml-4 overflow-hidden">
                            <el-tooltip effect="dark" :content="row.company" placement="top">
                                <div class="text-base line-clamp-2">
                                    {{ row.company }}
                                </div>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="地址" prop="address" min-width="200" >
                    <template #default="{ row }">
                        <div class="ml-4 overflow-hidden">
                            <el-tooltip effect="dark" :content="row.address" placement="top">
                                <div class="text-base line-clamp-2">
                                    {{ row.address }}
                                </div>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="服务类型" prop="cate_name" min-width="260" />
                <el-table-column label="服务产品" prop="info" min-width="100" >
                    <template #default="{ row }">
                        <span>1</span>
                    </template>
                </el-table-column>
                <el-table-column label="启用状态" min-width="160">
					<template #default="{ row }">
						<span v-if="row.is_enable == 1" style="color:#67C23A;">启用</span>
						<span v-if="row.is_enable == 0" style="color:#F56C6C;">停用</span>
					</template>
                </el-table-column>
				<el-table-column label="操作" width="200" fixed="right">
					<template #default="{ row }">
                        <el-button v-perms="['server.server/delUser']" type="danger" link v-if="row.is_enable == 1" @click="handleStatus(row.id, 0)">停用</el-button>
                        <el-button v-perms="['server.server/delUser']" type="success" link v-if="row.is_enable == 0" @click="handleStatus(row.id, 1)">启用</el-button>
						<el-button v-perms="['server.server/delUser']" type="danger" link @click="handleDelete(row.id)">删除</el-button>
                        <el-button v-perms="['server.server/saveUser:edit']" type="primary" link>
							<router-link :to="{ path: getRoutePath('server.server/saveUser:edit'), query: { id: row.id } }" > 修改 </router-link>
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="flex justify-end mt-4">
				<pagination v-model="pager" @change="getLists" />
			</div>
		</el-card>
		<edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
		<check_demand v-model:show="checkState.show" :value="checkState.value" @confirm="handleConfirmCheck"></check_demand>
	</div>
</template>
<script lang="ts" setup name="userList">
	import { userList, delUser, rejectUser, passUser, sendTable, rejectDetail, cateList, changeStatus } from '@/api/service';
	import { usePaging } from '@/hooks/usePaging';
	import feedback from '@/utils/feedback';
	import EditPopup from './edit.vue';
	import check_demand from './check_demand.vue'
	import { nextTick, onActivated, reactive, ref, shallowRef } from 'vue';
	import {getRoutePath} from '@/router'
	import { useDictOptions } from "@/hooks/useDictOptions";
	import useAppStore from '@/stores/modules/app'

	const useApp = useAppStore()

	const checkState = reactive({
		show: false,
		value: '',
		status: ''
	})
	//审核通过
	const handlePass = async (value : any) => {
		console.log(value)
		await feedback.confirm('确认审核通过？')
		await passUser({ id: value })
		getLists()
	}
	const status_now:any = ref()
	// 审核驳回弹窗
	const handleCheck = (row : any) => {
		checkState.show = true
		checkState.value = row.id
		status_now.value = row.status;
	}
	const handleSend = async (id:any ) => {
		try{
			await feedback.confirm('确认给提交人的助融圈app中发送信息填写的表单？')
			await sendTable({ id })
			getLists()
		}catch(error){
			console.log(error)
		}
	}
	const handleConfirmCheck = async (value : any) => {
		console.log(value)
		if (status_now.value == 4) {
			await rejectDetail({ ...value })
		} else {
			await rejectUser({ ...value })
		}
		checkState.show = false
		getLists()
	}

	const editRef = shallowRef<InstanceType<typeof EditPopup>>()
	const showEdit = ref(false)
	const handleAdd = async (id?: number) => {
	    showEdit.value = true
	    await nextTick()
	    if (id) {
	        editRef.value?.setFormData({
	            pid: id
	        })
	    }
	    editRef.value?.open('add')
	}
	
	const handleEdit = async (data: any) => {
	    showEdit.value = true
	    await nextTick()
	    editRef.value?.open('edit')
	    editRef.value?.getDetail(data)
	}

	const { optionsData } = useDictOptions<{
    	cateList: any,
	}>({
		cateList: {
			api: cateList
		}
	})
	
	const queryParams = reactive({
		status: 2,
		cate_id: '',
		name: '',
		phone: '',
		is_enable: 0,
		area_id: ''
	})
    // 切页序号变化
    const indexAdd = (index: number) => {
        const page = pager.page // 当前页码
        const pagesize = pager.size // 每页条数
        return index + 1 + (page - 1) * pagesize
    }
	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: userList,
		params: queryParams
	})

    const handleStatus = async (id : number, status : number) => {
        try{
            if (status == 0) {
                await feedback.confirm('停用之后，该手机号登录客户端则为普通用户身份，是否确认停用？')
                await changeStatus({ id, status })
                getLists()
            } else {
                await feedback.confirm('启用之后，该手机号登录客户端则拥有服务商身份，是否确认启用？')
                await changeStatus({ id, status })
                getLists()
            }
        }catch(error){
            console.log(error)
        }
    }
	const handleDelete = async (id : number) => {
		await feedback.confirm('删除之后有关该服务商的所有信息将会清空，不可找回，请确认是否删除该服务商？')
		await delUser({ id })
		getLists()
	}

	onActivated(() => {
		getLists()
	})

	getLists()
</script>